<template>
    <div style="overflow: auto">
        <div style="height: 65px ;overflow: hidden;position: relative; background-color: #dae9f4">
            <div class="logo-md">
              <img class="show-in-sm" :src="logo" alt="LOGO">
                <p><label id="time" style="color: #ac2925;position:absolute;right: 480px;">xxx</label></p>
            </div>

        </div>
        <el-menu
                :background-color="ui.bgc"
                :text-color="ui.tc"
                :active-text-color="ui.atc"

                :default-active="menuDefaultActive"
                class="el-menu-demo"
                router
                mode="horizontal">
            <el-menu-item index="/ei">
                <i class="el-icon-s-home"></i>首页
            </el-menu-item>
            <el-menu-item index="/ei/signup">
              <i class="el-icon-document-add"></i>在线报名
            </el-menu-item>
            <el-menu-item index="/ei/myExam">
              <i class="el-icon-document"></i>我的考试
            </el-menu-item>

            <el-menu-item index="/ei/self">
              <i class="el-icon-edit-outline"></i>修改信息
            </el-menu-item>
            <el-menu-item index="#" @click="logout">
              <i class="el-icon-switch-button"></i>退出系统
            </el-menu-item>


        </el-menu>
        <transition name="ui-fade">
            <router-view style="overflow: auto;height:calc(100vh - 126px);"/>
        </transition>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                menuDefaultActive: "/ei",
                logo: require('../../assets/logo_school.png'),
                ui: {
                    bgc: "",
                    tc: "",
                    atc: "",
                }
            };
        },
        created() {
            this.menuDefaultActive = this.$route.path
            //this.setUI()
        },
        mounted() {

        },
        methods: {
            logout() {
                this.$confirm("确定退出？", '提示', {type: "warning"}).then(() => {
                    sessionStorage.clear()
                    this.$router.push("/login")
                    this.$message({
                        type: "success",
                        message: "退出成功!"
                    });
                })
            },
            setUI() {
                let hours = new Date().getHours();
                if (hours < 6 || hours > 18) {
                    this.ui = {
                        bgc: "#545c64",
                        tc: "#fff",
                        atc: "#ffd04b",
                    }
                }
            }
        },
        watch: {
            $route(to, from) {
                this.menuDefaultActive = to.path
            }
        },
    }
    function mytime() {
      var a = new Date();
      var b = a.toLocaleTimeString();
      var c = a.toLocaleDateString();
      document.getElementById("time").innerHTML = c + "&nbsp" + b;
      setInterval(function() {mytime()},1000);
    }
</script>
<style lang="scss">
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
    }


    .p-title {
        text-align: center;
        font-size: 28px;
        letter-spacing: 2px;
    }

    .ui-fade-enter-active {
        -webkit-transition: all 1.0s ease;
    }

    .ui-fade-leave-active {
        -webkit-transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .ui-fade-enter, .ui-fade-leave {
        -webkit-transform: translateX(30px);
        opacity: 0;
    }

    .logo-title {
        font-size: 22px;
        font-weight: bold;
        color: #196eab;
    }


    @media screen and (max-width: 678px) {
        .logo-md {
            display: none;
        }
        .logo-sm {
            .logo-title {
                line-height: 65px;
                text-align: center;
                display: block;
                background-color: #a9a9a926;
            }
        }
    }

</style>